import { Component } from 'react';
import classNames from 'classnames';
import { Icon,Tooltip,Tab,Tabs,Button } from '@blueprintjs/core';
import { connect } from 'dva';
import styles from './Lists.less';
import router from 'umi/router';
import {updateState} from '../../../../models/global';
import ScrollWrapper from '../../../../components/ScrollWrapper';
import { Table,Select,TreeSelect } from 'antd';
import 'antd/dist/antd.css';

const { TreeNode } = TreeSelect;

class Lists extends Component {
    constructor(props) {
        super(props);
        this.state = {
            country: [],
            selectCountrys: [],
            types: [//类型列表
              {value: "street",key:"street",title: "街道"},
              {value: "build",key:"build",title: "建筑物"},
              {value: "load",key:"load",title: "居民点"},
            ],
            selectTypes: []
        }
    }

    queryCountry = () => {
    	ajax_get({
    		url:`/dm/tree/`,
    		data: {level:0, type: "districts"}
    	}).then((res)=>{
    		if(!res || !res.data) {
    			this.setState({country: []});
    			return;
    		}
    		let country = [];
    		res.data.map((item,index) => {
    			country.push({
					title: item.name,
					value: item.code + "-" + index,
					key: index,
				});
    		});
    		this.setState({country});
    	}).catch((data)=>{
    		this.setState({country: []});
    	})
    }

	loadCountry = (treeNode) => {
	  console.log(treeNode)
	  return new Promise((resolve) => {
	      if (treeNode.props.children && treeNode.props.children.length) {
	          resolve();
	          return;
	      }
	      const countryName = treeNode.props.title;
	      ajax_get({
	      	url: `/dm/tree/`,
	      	data: {level: countryName === '市本级' ? 1 : 0, type: "streets", name: countryName},
	      }).then((res)=>{
	      	if(!res || !res.data) {
	          resolve()
	        };
	      	const {country} = this.state;
	        let arr = [];
	      	country.forEach((ct) => {
	      		if(countryName === ct.title) {
	      			ct.children = res.data.map((item,index) => {
						return {
							title: ct.title + "-" + item.name,
							value: item.code + "-" + ct.key + "-" + index,
							key: ct.key + "-" + index,
							isLeaf: true
						 }
					});
	      		}
	          arr.push(ct)
	      	});
	      	this.setState({country: arr});
	        resolve()
	      }).catch((res)=>{
	        resolve()
	      })
	  });
	}

	handleCountryChange = value => {
		let hasPar = false;
		value.map(val => {
			if((val.split('-')).length-1 === 1) {
				hasPar = true;
			}
		})
		if(hasPar) return;
		this.setState({selectCountrys:value})
	}

	handleTypeChange = value => {
		this.setState({selectTypes:value})
	}

    onChange = (val) => {
      console.log(val)
    }

    componentWillMount() {
        this.queryCountry();
    }

    render() {
        const {country,selectCountrys,types,selectTypes} = this.state;

        const data = [
          { key: 1, name: '中山路', type: "道路", address: 'qqqqqqq', description: '111111111'},
          { key: 2, name: '德基广场', type: "居民点", address: 'wwwwwwwwwww', description: '222222222222222' },
          { key: 3, name: '仲成大厦', type: "建筑物", address: 'eeeeeeeee', description: '333333333333333333' },
          { key: 1, name: '中山路', type: "道路", address: 'qqqqqqq', description: '111111111'},
          { key: 2, name: '德基广场', type: "居民点", address: 'wwwwwwwwwww', description: '222222222222222' },
          { key: 3, name: '仲成大厦', type: "建筑物", address: 'eeeeeeeee', description: '333333333333333333' },
          { key: 1, name: '中山路', type: "道路", address: 'qqqqqqq', description: '111111111'},
          { key: 2, name: '德基广场', type: "居民点", address: 'wwwwwwwwwww', description: '222222222222222' },
          { key: 3, name: '仲成大厦', type: "建筑物", address: 'eeeeeeeee', description: '333333333333333333' },
          { key: 1, name: '中山路', type: "道路", address: 'qqqqqqq', description: '111111111'},
          { key: 2, name: '德基广场', type: "居民点", address: 'wwwwwwwwwww', description: '222222222222222' },
        ];
        const columns = [
          { title: '名称', dataIndex: 'name', key: 'name' },
          { title: '种类', dataIndex: 'type', key: 'type', render: (text, record, index) => (record.type+" ")},
          { title: '行政区', dataIndex: 'address', key: 'address' },
          { title: '描述', dataIndex: 'description', key: 'description' },
          { title: '操作', dataIndex: '', key: 'operation', render: function(text, record, index) {
            return <span className={styles.infoSapn} onClick={function(val) {
              console.log(val)
            } } >信息</span>; } },
    //精简写法
    //{ title: '操作', dataIndex: '', key: 'operation', render: (text, record, index) => <a href="#" name="delete" onClick={() => self.showCurRowMessage(record)}>信息</a> },
        ];

        const pagination = {
          defaultCurrent: 2,
          total: 500
        }

        return (
          <div className={styles.listsDiv}>
            <ScrollWrapper className={styles.searchFilterPan}>
                <div className={styles.searchSelect}>
                  <div className={styles.label}>行政区划:</div>
                  <TreeSelect
                    className={styles.selectContainer}
                    showSearch
                    style={{ width: 270 }}
                    value={selectCountrys}
                    dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
                    placeholder="请选择"
                    allowClear
                    multiple
                    treeData={country}
                    onChange={this.handleCountryChange}
                    loadData={this.loadCountry}
                  >
                  </TreeSelect>
                </div>
                <div className={styles.searchSelect}>
                  <div className={styles.label}>类型:</div>,
                  <TreeSelect
                    className={styles.selectContainer}
                    showSearch
                    style={{ width: 270 }}
                    value={selectTypes}
                    dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
                    placeholder="请选择"
                    allowClear
                    multiple
                    treeData={types}
                    onChange={this.handleTypeChange}
                  >
                  </TreeSelect>
                </div>
                <Button className={styles.searchBtn}>检索</Button>
            </ScrollWrapper>
            <ScrollWrapper className={styles.searchListPan}>
              <Table columns={columns} dataSource={data} pagination={pagination} onChange={this.onChange}/>
            </ScrollWrapper>
          </div>
        )
    }
}

function mapStateToProps(state) {
    return {

    };
}

export default connect(mapStateToProps)(Lists);
